<template>
	<view>
		<u-sticky>
			<div class="nav">
				<uni-nav-bar left-icon="back" @clickLeft="$tab.back()" :fixed="true" :statusBar="true" :border="false"
					color="#FFF" backgroundColor="transparent" left-width="560rpx">
					<div class="flex items-center" slot="left">
						<u-icon name="arrow-left" color="#FFF"></u-icon>
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/font_kuaguomaoyi@3x.png" mode="widthFix" style="width: 492rpx; margin-left: 20rpx;"></image>
					</div>
				</uni-nav-bar>
			</div>
		</u-sticky>
		
		<div class="px-20 list">
			<view class="w-full relative" v-for="i in shuziOneTypeList" :key="i.id"
				@click="$tab.nav(`/pages/index/shuzi?title=${i.name}&code=${i.code}&id=${i.id}`)">
				<image :src="globalConfig.imagePrefix + i.iconUrl" class="w-full" mode="widthFix">
				</image>
				<view class="shuzi-title text-32 font-500 u-line-1 text-FFF">
					{{i.name}}
				</view>
			</view>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shuziOneTypeList:[],
				globalConfig:getApp().globalData.config
			};
		},
		onLoad() {
			this.getData()
		},
		methods:{
			async getData(){
				const shuzi = await this.$Api.common.typeChildrenAll({
					code: "kuaguomaoyi"
				})
				this.shuziOneTypeList = shuzi.data
			}
		}
	}
</script>

<style lang="scss">
	.nav {
		height: 320rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages4/img_kuaguomaoyi@3x.png) no-repeat;
		background-size: 100% 100%;
	}
	
	.list{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20rpx;
		font-size: 0;
	}
	
	.shuzi-title {
		width: 100%;
		height: 52rpx;
		background-color: rgba(0, 0, 0, .5);
		position: absolute;
		left: 0;
		bottom: 0;
		line-height: 52rpx;
		text-align: center;
		border-radius: 0 0 16rpx 16rpx;
	}
</style>